<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">名称:</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" v-model="searchForm.deploymentName" placeholder="请输入">
                            </div>
                            <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2"
                                @click="search()"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                            <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2" @click="resetAll()">
                                <span><span>清空条件</span></span></b-button>
                        </div>
                    </div>
                    <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid">
                            <div class="row">
                                <div class="col m--align-left">
                                    
                                </div>
                                <div class="col m--align-right">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
                :data="dataList">
                <!-- 复选框 -->
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="deploymentId" show-overflow-tooltip label="部署单号"></el-table-column>
                <el-table-column align="left" prop="deploymentName" show-overflow-tooltip label="名称"></el-table-column>
                <el-table-column align="left" prop="deploymentTime" :formatter="formatterTime" show-overflow-tooltip label="部署时间"></el-table-column>
                <el-table-column align="left" prop="version" show-overflow-tooltip label="版本">
                    <template slot-scope="scope">
                        <div class="symbol symbol-40 symbol-circle symbol-light-warning">									
                            <span class="symbol-label font-size-h10" style="font-size: 14px;">{{scope.row.version}}</span>								
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="tenantId" show-overflow-tooltip label="租户编号"></el-table-column>
                <el-table-column align="left" prop="status" show-overflow-tooltip label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">
                            <b-badge class="mr-1" variant="success">发布中</b-badge>
                        </div>
                        <div v-else-if="scope.row.status == 1">
                            <b-badge class="mr-1" variant="danger">暂停</b-badge>
                        </div>
                        <div v-else>
                            <b-badge class="mr-1" variant="secondary">未知</b-badge>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="flag" min-width="150" show-overflow-tooltip label="标识">
                    <template slot-scope="scope">
                        <div v-if="scope.row.flag == 0">
                            <b-badge class="mr-1" variant="primary">通过平台设计器设计</b-badge>
                        </div>
                        <div v-else-if="scope.row.flag == 1">
                            <b-badge class="mr-1" variant="danger">通过上传部署</b-badge>
                        </div>
                        <div v-else>
                            <b-badge class="mr-1" variant="secondary">未知</b-badge>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="productName" label="产品线" min-width="150"></el-table-column>
                <el-table-column align="center" prop="groupName" label="产品组" min-width="180"></el-table-column>
                <el-table-column align="center" label="操作" fixed="left" min-width="180">
                    <template slot-scope="scope">
                        <!--scope.row当前行的对象-->
                        <a href="javascript:;" @click="getLcDeploymentDetail(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="详情">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path
                                            d="M19.2078777,9.84836149 C20.3303823,11.0178941 21,12 21,12 C21,12 16.9090909,18 12,18 C11.6893441,18 11.3879033,17.9864845 11.0955026,17.9607365 L19.2078777,9.84836149 Z"
                                            fill="#000000" fill-rule="nonzero" />
                                        <path
                                            d="M14.5051465,6.49485351 L12,9 C10.3431458,9 9,10.3431458 9,12 L5.52661464,15.4733854 C3.75006453,13.8334911 3,
                                          12 3,12 C3,12 5.45454545,6 12,6 C12.8665422,6 13.7075911,6.18695134 14.5051465,6.49485351 Z"
                                            fill="#000000" fill-rule="nonzero" />
                                        <rect fill="#000000" opacity="0.3"
                                            transform="translate(12.524621, 12.424621) rotate(-45.000000) translate(-12.524621, -12.424621) "
                                            x="3.02462111" y="11.4246212" width="19" height="2" />
                                    </g>
                                </svg>
                            </span>
                        </a>
                        <a href="javascript:;" @click="getLcInstanceWin(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="流程实例">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M12.9835977,18 C12.7263047,14.0909841 9.47412135,11 5.5,11 C4.98630124,
                                        11 4.48466491,11.0516454 4,11.1500272 L4,7 C4,5.8954305 4.8954305,5 6,5 L20,
                                        5 C21.1045695,5 22,5.8954305 22,7 L22,16 C22,17.1045695 21.1045695,18 20,
                                        18 L12.9835977,18 Z M19.1444251,6.83964668 L13,10.1481833 L6.85557487,
                                        6.83964668 C6.4908718,6.6432681 6.03602525,6.77972206 5.83964668,
                                        7.14442513 C5.6432681,7.5091282 5.77972206,7.96397475 6.14442513,
                                        8.16035332 L12.6444251,11.6603533 C12.8664074,11.7798822 13.1335926,11.7798822 13.3555749,11.6603533 L19.8555749,8.16035332 C20.2202779,7.96397475 20.3567319,7.5091282 20.1603533,7.14442513 C19.9639747,6.77972206 19.5091282,6.6432681 19.1444251,6.83964668 Z" fill="#000000"/>
                                        <path d="M8.4472136,18.1055728 C8.94119209,18.3525621 9.14141644,
                                        18.9532351 8.89442719,19.4472136 C8.64743794,19.9411921 8.0467649,
                                        20.1414164 7.5527864,19.8944272 L5,18.618034 L5,14.5 C5,13.9477153 5.44771525,
                                        13.5 6,13.5 C6.55228475,13.5 7,13.9477153 7,14.5 L7,17.381966 L8.4472136,
                                        18.1055728 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    </g>
                                </svg>
                            </span>
                        </a>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>
        </div>
        <LcDeploymentWinDetail ref="LcDeploymentWinDetailRef"></LcDeploymentWinDetail>
        <LcInstanceWin ref="LcInstanceWinRef"></LcInstanceWin>
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import LcDeploymentWinDetail from "@/view/workflow/lc-components/lc-deployment-win.vue";
import LcInstanceWin  from "@/view/workflow/lc-instance/lc-instance-win.vue";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating,dateformat } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: { deploymentName: "" },
            dataList: [],
            sels: [], //当前选框选中的值
            pageNo: 1,      // 默认当前是第一页
            pageSize: 5,    // 当前每页的数据是5条
            totalCount: 0   // 总数默认为0
        }
    },
    components: {
        LcDeploymentWinDetail,
        LcInstanceWin,
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "运行实例" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods: {
        initList() {
            showWating({ renderBody: "tableBody" });
            var params = {};
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_WORKFLOW_API + "/lcDeploymentHis/list", params).then(({ data }) => {
                this.dataList = data.data;//给结果集赋值
                this.totalCount = data.total;// 获取当前数据的总数    
            });
        },

        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
            console.log("选中的值", sels.map((item) => item.lcProductId));
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        getLcDeploymentDetail(row) {
            this.$refs.LcDeploymentWinDetailRef.showModal(row.id);
        },
        formatterTime(row) {
            return dateformat(row.deploymentTime);
        },
        getLcInstanceWin(row){
            this.$refs.LcInstanceWinRef.showModal(row);
        },
    }
};
</script>